<template>
  <div id="navToolBar-container">
    <div id="navToolBar-box">
      <template v-for="(item, index) in itemAction">
        <Transition
          appear
          name="itemAnim-loading"
        >
          <div
            v-if="index < renderCounter"
            class="item-box"
            @click="onClickActionItem(item)"
          >
            <ElTooltip
              placement="left"
              :content="item.tip"
              effect="customized"
            >
              <OhVueIcon
                class="icon"
                :name="item.icon"
                :scale="iconScale"
              ></OhVueIcon>
            </ElTooltip>
          </div>
        </Transition>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { OhVueIcon } from "oh-vue-icons";
import ColorToggle from "./colorToggle.vue";
const { width, height } = useWindowSize();
const colorCookie = useCookie("color");
const isDark = useDark();
const colorMode = useColorMode();
const router = useRouter();

const itemAction = reactive([
  {
    url: "/",
    tip: "主页",
    icon: "fa-home",
  },
  {
    url: "/",
    tip: "工具",
    icon: "fa-tools",
  },
  {
    url: "/blog/",
    tip: "博客",
    icon: "si-bloglovin",
  },
  {
    url: "/user/",
    tip: "用户",
    icon: "bi-gear-fill",
  },
]);

const iconScale = computed(() => {
  if (Math.min(width.value, height.value) > 1024) return 1.3;
  if (Math.min(width.value, height.value) > 768) return 1.15;
  if (Math.min(width.value, height.value) > 400) return 1;
  return 0.6;
});

const barHeight = computed(() => `${itemAction.length * 3}vmin`);
const renderCounter = ref(0);
const renderCounterIncrement = (time = 500) => {
  if (renderCounter.value < itemAction.length) {
    setTimeout(renderCounterIncrement, 280);
    renderCounter.value++;
  }
};

const onClickActionItem = (item: any) => {
  router.push(item.url);
};

onMounted(() => {
  renderCounterIncrement();
});
</script>

<style lang="scss" scoped>
#navToolBar-container {
  @apply fixed h-screen flex items-center right-0;
  // background-color: var(--bg-secondly-50);
  background: linear-gradient(
    var(--bg-secondly-10),
    40%,
    var(--bg-secondly),
    var(--bg-secondly-10)
  );
}
#navToolBar-box {
  @apply w-fit h-[v-bind(barHeight)];
}
.item-box {
  @apply w-[3vmin] h-[3vmin] flex justify-center items-center opacity-20 transition-all duration-[0.4s] ease-[ease] mr-[0.4vmin] m-[0.8vmin] hover:cursor-pointer hover:opacity-100 hover:transition-all hover:duration-[0.4s] hover:ease-[ease];
}

.itemAnim-loading-enter-active {
  animation: itemAnim-loading-in 0.8s;
}

@keyframes itemAnim-loading-in {
  0% {
    transform: translateX(5vmax);
    opacity: 0;
  }
  80% {
    transform: translateX(-0.5vmax);
    opacity: 1;
  }
  100% {
    transform: translateX(0vmax);
    opacity: 0.2;
  }
}
.icon {
  // color: #fff;
  // color: var(--color);
  &:hover {
    opacity: 1;
    // color: var(--color-primary);
  }
}
</style>
